
<template>
  <div class="report-container">
    <div class="report-title">
      <h1><span v-show="prodLineName">{{ prodLineName + ': ' }}</span>生产看板</h1>
    </div>
    <div v-if="!show" class="report-main">
      <div class="main-top">
        <SimEcharts height="100%" width="30%" class="e-chart-border" :chart-data="pieData"/>
        <div class="top-middle-chart e-chart-border chart-margin">
          <div class="title">
            <div class="col">人员：{{ topHeaderInfo.person }}</div>
            <div class="col">出勤：{{ topHeaderInfo.attendancePerson }}</div>
            <div class="col">产能：{{ topHeaderInfo.dayCapacity }}</div>
          </div>
          <SimEcharts height="calc(100% - 50px)" class="chart" :chart-data="barData"/>
        </div>
        <div class="top-right-table e-chart-border">
          <p>品质—安灯</p>
          <div class="table-header">
            <div class="item-line">
              <div class="col1">类型编号</div>
              <div class="col2">安灯类型</div>
              <div class="col3">触发时间</div>
            </div>
          </div>
          <div ref="tableContent" class="table-content">
            <template v-for="(item, index) in tableData">
              <div :key="index" :class="[item.state === '0'?'unsign': item.state === '1'?'unrelieve': 'relieve']"
                   class="item-line">
                <div class="col1">{{ item.device }}</div>
                <div class="col2">{{ item.andon_type_name }}</div>
                <div class="col3">{{ item.DAY }}</div>
              </div>
            </template>
          </div>
        </div>
      </div>
      <SimEcharts height="50%" class="e-chart-border" :chart-data="basicBarData"/>
    </div>
    <div v-if="show" class="prod-line">
      <div class="prod-content" align="center">
        <el-select v-model="prodLineName" placeholder="请选择">
          <el-option
              v-for="item in options"
              :key="item.label"
              :label="item.label"
              :value="item.label">
          </el-option>
        </el-select>
        <div align="center">
          <el-button type="primary" @click="handleConfirm">确认产线</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {pieData, barData} from '@/api/service-module/dashBoard/echartsData'
import {connectWebsocket, sendMessage} from "@/api/websocket";

export default {
  name: 'ColiProductLineDashBoard',
  data() {
    return {
      options: [
        {
          value: '54401',
          label: '线圈组'
        },
      ],
      prodLineName: '',
      nowDate: '',
      show: true,
      pieData: JSON.parse(JSON.stringify(pieData)),
      topHeaderInfo: {
        person: 1,
        attendancePerson: 1,
        dayCapacity: 20
      },
      barData: JSON.parse(JSON.stringify(barData)),
      tableData: [],
      basicBarData: JSON.parse(JSON.stringify(barData)),
      page: {
        current: 1,
        size: 10
      }
    }
  },
  created() {
    this.reloadWeb()
    // this.initData()
  },
  destroyed() {
  },
  mounted() {
    this.tableContent = this.$refs.tableContent
    this.rollText()
  },
  methods: {
    handleConfirm() {
      if (this.prodLineName) {
        this.initData()
      } else {
        this.$confirm('未选择产线将不产生数据并退出页面，是否确认?', '提示', {
          confirmButtonText: '确认退出',
          cancelButtonText: '返回选择产线',
          type: 'warning'
        }).then(() => {
          window.close()
        })
      }
    },
    initWebData() {
      connectWebsocket(
          // 测试地址
          process.env.VUE_APP_WS_URL + '/CoilDashBoardWebSocket/coil',
          // 传递给后台的数据
          this.prodLineName,
          // 成功拿到后台返回的数据的回调函数
          (data) => {
            console.log(JSON.parse(data))
            this.queryDeviceState(JSON.parse(data))
            this.querySynthesize(JSON.parse(data))
            this.queryAndonObject(JSON.parse(data))
            this.queryPersonQty(JSON.parse(data))
          },
          () => {
            sendMessage("Im tired!")
          }
      )
    },
    reloadWeb() {
      //每隔8小时刷新一下页面，防止卡死
      setTimeout(location.reload, 1000 * 60 * 60 * 8)
    },
    initData() {
      this.show = false
      /* 设备状态占比 */
      this.pieData.title.text = '设备状态占比'
      delete this.pieData['legend']
      delete this.pieData['tooltip']
      this.queryDeviceState()
      /* 综合-出勤 */
      this.barData.title.text = '综合-出勤'
      /* 品质—安灯 */
      /* 绩效分析 */
      this.basicBarData.title.text = '绩效分析'
      this.basicBarData.color = '#20a0ff'
      this.formatDate()
      this.initWebData()
      this.rollText()
    },
    queryDeviceState(data) {
      const obj = data[0]
      const series = [];
      const colors = ['#409EFF', '#1CA261', '#FFCD43', '#FF2525', '#2DC4D2', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
      for (const item in obj) {
        const param = {
          value: obj[item],
          name: item,
          label: {
            color: ''
          }
        }
        series.push(param)
      }
      series.forEach((item, index) => {
        item.label.color = colors[index]
      })
      this.pieData.series[0].data = series

    },
    querySynthesize(data) {
      this.topHeaderInfo = data
      const xAxis = [];
      const series = []
      const barData = data.weekCapacity
      for (const key in barData) {
        xAxis.push(key)
        series.push(barData[key])
      }
      this.barData.xAxis.data = barData.map(item => {
        return item.day
      })
      this.barData.series[0].data = barData.map(item => {
        return item.num
      })
    },
    queryAndonObject(data) {
      this.tableData = data
    },
    queryPersonQty(data) {
      const qtyList = []
      const realNameList = []

      data.records.forEach(item => {
        qtyList.push(item.qty)
        realNameList.push(item.real_name)
      })
      this.basicBarData.series[0].data = qtyList
      this.basicBarData.xAxis.data = realNameList

    },
    formatDate() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const month = date.getMonth() + 1 // 月
      const day = date.getDate() // 日
      const week = date.getDay() // 星期
      const weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      let hour = date.getHours() // 时
      hour = hour < 10 ? '0' + hour : hour // 如果只有一位，则前面补零
      let minute = date.getMinutes() // 分
      minute = minute < 10 ? '0' + minute : minute // 如果只有一位，则前面补零
      let second = date.getSeconds() // 秒
      second = second < 10 ? '0' + second : second // 如果只有一位，则前面补零
      this.nowDate = `${year}-${month}-${day} ${hour}:${minute}:${second} ${weekArr[week]}`
    },
    rollText() {
      let speed = 300
      let that = this

      function Marquee() {
        if (that.$refs.tableContent.scrollTop >= ((that.$refs['tableContent'].offsetHeight / 6))) {
          that.$refs.tableContent.scrollTop = 0
        } else {
          that.$refs.tableContent.scrollTop = that.$refs.tableContent.scrollTop + 1
        }
      }

      setInterval(Marquee, speed)
    }
  }
}
</script>

<style lang="scss" scoped>

/* 小分辨率设备 (平板、电视机或者安卓设备, 960px and down) */
@media only screen and (max-width: 960px) {
  .report-container {
    background-image: url("../../../public/billboard.jpg");
    background-size: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    font-size: 12px;

    .report-title {
      width: 100%;
      text-align: center;
      color: #F2F6FC;

      h3 {
        margin-top: 6px;
        margin-bottom: 0;
      }

      p {
        margin-top: 0;
      }
    }

    .report-main {
      height: calc(100% - 52px);
      padding: 0 10px;

      .main-top {
        height: 50%;
        margin-bottom: 1%;
        display: flex;

        .top-middle-chart {
          width: 38%;
          height: 100%;

          .title {
            height: 50px;
            line-height: 50px;
            display: flex;
            font-size: 20px;
            font-weight: bolder;
            color: #FFF;

            .col {
              width: 33%;
              height: 100%;
              text-align: center;
            }
          }

          .chart {
            height: calc(100% - 50px);
          }
        }

        .top-right-table {
          width: 30%;
          height: 100%;

          p {
            padding: 4px 4px;
            margin: 0;
            font-weight: bolder;
            font-size: 14px;
            color: #ffffff;
          }

          .table-header {
            height: 32px;
            font-weight: bolder;

            .item-line {
              height: 100%;
              color: #ffffff;
              text-align: center;
            }
          }

          .table-content {
            height: calc(100% - 50px);
            overflow: hidden;
            margin-top: 0.1rem;
            color: #20a0ff;
            font-size: 18px;
            text-align: center;

            .unsign {
              background-color: rgba(230, 162, 60, 0.18);
              border-radius: 0px;
            }

            .unrelieve {
              background-color: rgba(64, 158, 255, 0.2);
              border-radius: 0px;
            }

            .relieve {
              background-color: rgba(103, 194, 58, 0.25);
              border-radius: 0px;
            }
          }

          .item-line:nth-of-type(odd) {
            background: rgba(122, 178, 203, 0.22);
          }

          .item-line:nth-of-type(even) {
            background: rgba(153, 203, 122, 0.22);
          }

          .item-line {
            display: flex;
            border-radius: 9px;

            .col1 {
              width: 25%;
              padding: 2px 2px;
              font-size: 0.7rem;
            }

            .col2 {
              width: 30%;
              padding: 2px 2px;
              font-size: 0.7rem;
            }

            .col3 {
              width: 45%;
              padding: 2px 2px;
              font-size: 0.7rem;
            }
          }
        }

        .e-chart-border {
          border: 1px solid rgba(0, 102, 255, 0.15);
        }

        .chart-margin {
          margin: 0 1%;
        }
      }
    }

    .prod-line {
      position: absolute;
      left: 0;
      bottom: 0;
      right: 0;
      top: 0;
      z-index: 1000;
      background-color: rgba(0, 0, 0, 0.16);

      .prod-content {
        margin-top: 200px;
        margin-left: calc(50% - 180px);
        background-color: #FFF;
        padding: 20px 40px;
        width: 400px;
        height: 140px;
      }
    }

    .e-chart-border {
      border: 1px solid rgba(0, 94, 255, 0.09);
      margin-bottom: 1%;
    }
  }
}

/* 大分辨率设备 (工作站或者台式机, 961px and up) */
@media only screen and (min-width: 961px) {
  .report-container {
    background-image: url("../../../public/billboard.jpg");
    background-size: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    font-size: 12px;

    .report-title {
      width: 100%;
      text-align: center;
      color: #F2F6FC;

      h3 {
        margin-top: 6px;
        margin-bottom: 0;
      }

      p {
        margin-top: 0;
      }
    }

    .report-main {
      height: calc(100% - 9rem);
      padding: 0 10px;
      margin-top: 4rem;

      .main-top {
        height: 50%;
        margin-bottom: 1%;
        display: flex;

        .top-middle-chart {
          width: 38%;
          height: 100%;

          .title {
            height: 50px;
            line-height: 50px;
            display: flex;
            font-size: 20px;
            font-weight: bolder;
            color: #FFF;

            .col {
              width: 33%;
              height: 100%;
              text-align: center;
            }
          }

          .chart {
            height: calc(100% - 50px);
          }
        }

        .top-right-table {
          width: 30%;
          height: 100%;

          p {
            padding: 4px 4px;
            margin: 0;
            font-weight: bolder;
            font-size: 14px;
            color: #20a0ff;
          }

          .table-header {
            height: 32px;
            font-weight: bolder;

            .item-line {
              height: 100%;
              text-align: center;
              color: rgba(0, 255, 255, 0.22);
            }
          }

          .table-content {
            height: calc(100% - 50px);
            overflow: hidden;
            margin-top: 0.2rem;
            color: #20a0ff;
            font-size: 18px;
            text-align: center;

            .unsign {
              color: #E6A23C;
              border-left: 0px solid #FF7070;
            }

            .unrelieve {
              color: #409EFF;
              border-left: 0px solid #E6A23C;
            }

            .relieve {
              color: #67C23A;
              border-left: 0px solid #909399;
            }
          }

          .item-line:nth-of-type(odd) {
            background: rgba(122, 178, 203, 0.22);
          }

          .item-line:nth-of-type(even) {
            background: rgba(153, 203, 122, 0.22);
          }

          .item-line {
            display: flex;
            border-radius: 9px;

            .col1 {
              width: 25%;
              padding: 2px 2px;
            }

            .col2 {
              width: 30%;
              padding: 2px 2px;
            }

            .col3 {
              width: 45%;
              padding: 2px 2px;
            }
          }
        }

        .e-chart-border {
          border: 1px solid rgba(0, 255, 255, 0.15);
        }

        .chart-margin {
          margin: 0 1%;
        }
      }
    }

    .prod-line {
      position: absolute;
      left: 0;
      bottom: 0;
      right: 0;
      top: 0;
      z-index: 1000;
      background-color: rgba(0, 0, 0, 0.16);

      .prod-content {
        margin-top: 200px;
        margin-left: calc(50% - 180px);
        background-color: #FFF;
        padding: 20px 40px;
        width: 400px;
        height: 140px;
      }
    }

    .e-chart-border {
      border: 1px solid rgba(0, 255, 255, 0.04);
      margin-bottom: 1%;
    }
  }
}
</style>
